<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body,html,.ind_content {position: relative;width:100%;height:100%;padding:0;margin:0;}
        .ind_content {overflow: hidden;}
        .ind_bg {position: absolute;top:0px;left:0px;width:100%;height:100%;background-color: #000;overflow: hidden;}
        .ind_bg video {width:100%;height:100%;overflow: hidden;border:0;}
        .ind_ul {z-index: 90;position: relative;width:110%;height:110%;top:-5%;left:-5%;}
        .ind_li {position: absolute;top:0px;left:0px;width:100%;height:100%;background:url(./1.png) no-repeat center;background-size:cover;}
        .ind_block {position: absolute;top:0px;left:0px;width:100%;height:100%;background:url(./2.png) no-repeat center;background-size:cover;z-index: 120;overflow: hidden;}
        @media screen and (max-width:1000px){
          .ind_li {background-size:150%;}
        }
    </style>
  </head>
  <body>
     <div class="ind_content">
      <div class="ind_bg">
        <video src="./bg.mp4" autoplay id="video" controls muted loop></video>
      </div>
      <div class="ind_ul scene">
        <div class="ind_li layer" data-depth="0.5"></div>
        <div class="ind_li layer" data-depth="0.1"></div>
        <div class="ind_li layer" data-depth="0.15"></div>
        <div class="ind_li layer" data-depth="0.2"></div>
        <div class="ind_li layer" data-depth="0.25"></div>
        <div class="ind_li layer" data-depth="0.3"></div>
        <div class="ind_li layer" data-depth="0.35"></div>
        <div class="ind_li layer" data-depth="0.4"></div>
        <div class="ind_li layer" data-depth="0.45"></div>
        <div class="ind_li layer" data-depth="0.5"></div>        
      </div>
     </div> 
     <div class="ind_block">
          <canvas id="canvas"></canvas>
     </div>
     <script src="../../js/jquery-3.5.1.min.js"></script>
     <script src="./jquery.parallax.min.js"></script> 
     <script src="star.js"></script>
     <script>
      $(function(){           
        document.getElementById("video").play()
        $(".scene").parallax();                          
      })
     </script> 
  </body>
</html>